<template>
  <div class="config-presets-container">
    <el-tabs v-model="activePresetType" class="preset-tabs" @tab-change="handleTabChange">
      <!-- 应用管理 -->
      <el-tab-pane label="应用管理" name="application">
        <div class="preset-tab-content">
          <div class="preset-actions">
            <el-button type="primary" @click="handleCreate('application')">
              <el-icon><Plus /></el-icon>
              新建应用
            </el-button>
          </div>

          <el-table :data="applications" v-loading="loading" stripe>
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="应用名称" min-width="150" />
            <el-table-column prop="appid" label="应用ID" min-width="150" show-overflow-tooltip />
            <el-table-column prop="vender" label="供应商" width="150" />
            <el-table-column prop="region" label="区域" width="150" />
            <el-table-column prop="trainApiVersion" label="训练作业API版本" width="150" />
            <el-table-column prop="description" label="描述" min-width="150" show-overflow-tooltip />
            <el-table-column prop="is_active" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.is_active ? 'success' : 'info'">
                  {{ row.is_active ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240" fixed="right">
              <template #default="{ row }">
                <el-button size="small" @click="handleView('application', row)">查看</el-button>
                <el-button size="small" @click="handleEdit('application', row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete('application', row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- OBS桶配置 -->
      <el-tab-pane label="OBS桶配置" name="obs">
        <div class="preset-tab-content">
          <div class="preset-actions">
            <span style="font-size:small;">所属应用: &nbsp;</span>
            <el-select
              v-model="selectedApplicationId"
              placeholder="选择应用"
              clearable
              style="width: 200px; margin-right: 12px"
              @change="loadData('obs')"
            >
              <el-option
                v-for="app in applications"
                :key="app.id"
                :label="app.name"
                :value="app.id"
              />
            </el-select>
            <el-button type="primary" @click="handleCreate('obs')">
              <el-icon><Plus /></el-icon>
              新建OBS桶配置
            </el-button>
          </div>

          <el-table :data="obsBucketPresets" v-loading="loading" stripe>
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="配置名称" min-width="150" />
            <el-table-column label="所属应用" min-width="150">
              <template #default="{ row }">
                {{ row.application?.name || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="bucket_id" label="桶ID" min-width="200" show-overflow-tooltip />
            <el-table-column prop="bucket_path" label="桶路径" min-width="250" show-overflow-tooltip />
            <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
            <el-table-column prop="is_active" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.is_active ? 'success' : 'info'">
                  {{ row.is_active ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button size="small" @click="handleEdit('obs', row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete('obs', row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 资源池配置 -->
      <el-tab-pane label="资源池配置" name="resource">
        <div class="preset-tab-content">
          <div class="preset-actions">
            <span style="font-size:small;">所属应用: &nbsp;</span>
            <el-select
              v-model="selectedApplicationId"
              placeholder="选择应用"
              clearable
              style="width: 200px; margin-right: 12px"
              @change="loadData('resource')"
            >
              <el-option
                v-for="app in applications"
                :key="app.id"
                :label="app.name"
                :value="app.id"
              />
            </el-select>
            <el-button type="primary" @click="handleCreate('resource')">
              <el-icon><Plus /></el-icon>
              新建资源池配置
            </el-button>
          </div>

          <el-table :data="resourcePoolPresets" v-loading="loading" stripe>
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="配置名称" min-width="150" />
            <el-table-column label="所属应用" min-width="150">
              <template #default="{ row }">
                {{ row.application?.name || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="pool_type" label="资源池类型" width="120" />
            <el-table-column prop="pool_uid" label="资源池UID" min-width="200" show-overflow-tooltip />
            <el-table-column prop="spec_name" label="资源池名称" min-width="180" />
            <el-table-column prop="flavor_code" label="资源池规格" min-width="200" show-overflow-tooltip />
            <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
            <el-table-column prop="is_active" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.is_active ? 'success' : 'info'">
                  {{ row.is_active ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button size="small" @click="handleEdit('resource', row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete('resource', row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 镜像配置 -->
      <el-tab-pane label="镜像配置" name="image">
        <div class="preset-tab-content">
          <div class="preset-actions">
            <span style="font-size:small;">所属应用: &nbsp;</span>
            <el-select
              v-model="selectedApplicationId"
              placeholder="选择应用"
              clearable
              style="width: 200px; margin-right: 12px"
              @change="loadData('image')"
            >
              <el-option
                v-for="app in applications"
                :key="app.id"
                :label="app.name"
                :value="app.id"
              />
            </el-select>
            <el-button type="primary" @click="handleCreate('image')">
              <el-icon><Plus /></el-icon>
              新建镜像配置
            </el-button>
          </div>

          <el-table :data="imagePresets" v-loading="loading" stripe>
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="镜像名称" min-width="150" />
            <el-table-column prop="image_version" label="镜像版本" min-width="120" show-overflow-tooltip />
            <el-table-column label="所属应用" min-width="150">
              <template #default="{ row }">
                {{ row.application?.name || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="image_uid" label="镜像UID" min-width="250" show-overflow-tooltip />
            <el-table-column prop="image_version_uid" label="镜像版本UID" min-width="250" show-overflow-tooltip />
            <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
            <el-table-column prop="is_active" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.is_active ? 'success' : 'info'">
                  {{ row.is_active ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button size="small" @click="handleEdit('image', row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete('image', row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- NAS配置 -->
      <el-tab-pane label="NAS配置" name="nas">
        <div class="preset-tab-content">
          <div class="preset-actions">
            <span style="font-size:small;">所属应用: &nbsp;</span>
            <el-select
              v-model="selectedApplicationId"
              placeholder="选择应用"
              clearable
              style="width: 200px; margin-right: 12px"
              @change="loadData('nas')"
            >
              <el-option
                v-for="app in applications"
                :key="app.id"
                :label="app.name"
                :value="app.id"
              />
            </el-select>
            <el-button type="primary" @click="handleCreate('nas')">
              <el-icon><Plus /></el-icon>
              新建NAS配置
            </el-button>
          </div>

          <el-table :data="nasPresets" v-loading="loading" stripe>
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="配置名称" min-width="150" />
            <el-table-column prop="nas_name" label="NAS名称" min-width="150" show-overflow-tooltip />
            <el-table-column prop="nas_type" label="NAS类型" width="120" />
            <el-table-column prop="nas_uid" label="NAS UID" min-width="200" show-overflow-tooltip />
            <el-table-column prop="nas_instance_id" label="NAS实例ID" min-width="200" show-overflow-tooltip />
            <el-table-column prop="nas_shar_addr" label="NAS路径" min-width="250" show-overflow-tooltip />
            <el-table-column label="所属应用" min-width="150">
              <template #default="{ row }">
                {{ row.application?.name || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
            <el-table-column prop="is_active" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.is_active ? 'success' : 'info'">
                  {{ row.is_active ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button size="small" @click="handleEdit('nas', row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete('nas', row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      @close="handleDialogClose"
    >
      <el-form :model="form" label-width="130px" ref="formRef" :rules="formRules">
        <!-- 应用管理表单 -->
        <template v-if="currentType === 'application'">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入应用名称" :disabled="isViewMode" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.description" type="textarea" rows="2" placeholder="请输入描述" :disabled="isViewMode" />
          </el-form-item>
          <el-form-item label="应用ID">
            <el-input v-model="form.appid" placeholder="请输入应用ID" :disabled="isViewMode" />
          </el-form-item>
          <el-form-item label="凭证ID">
            <el-input v-model="form.hw_id" placeholder="请输入凭证ID" :disabled="isViewMode" />
          </el-form-item>
          <el-form-item label="认证密钥">
            <el-input v-model="form.hw_appkey" placeholder="请输入认证密钥" :type="isViewMode ? 'text' : 'password'" :show-password="!isViewMode" :disabled="isViewMode" />
          </el-form-item>
          <el-form-item label="供应商">
            <el-input v-model="form.vender" placeholder="请输入供应商" :disabled="isViewMode" />
          </el-form-item>
          <el-form-item label="区域">
            <el-input v-model="form.region" placeholder="请输入区域" :disabled="isViewMode" />
          </el-form-item>
          <el-form-item label="训练作业API版本">
            <el-input v-model="form.trainApiVersion" placeholder="请输入训练作业API版本" :disabled="isViewMode" />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="form.is_active" active-text="启用" inactive-text="禁用" :disabled="isViewMode" />
          </el-form-item>
        </template>

        <!-- OBS桶配置表单 -->
        <template v-if="currentType === 'obs'">
          <el-form-item label="所属应用" prop="application_id">
            <el-select v-model="form.application_id" placeholder="请选择所属应用" style="width: 100%">
              <el-option
                v-for="app in applications"
                :key="app.id"
                :label="app.name"
                :value="app.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="配置名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入配置名称" />
          </el-form-item>
          <el-form-item label="桶ID" prop="bucket_id">
            <el-input v-model="form.bucket_id" placeholder="请输入桶ID" />
          </el-form-item>
          <el-form-item label="桶路径" prop="bucket_path">
            <el-input v-model="form.bucket_path" placeholder="请输入桶路径" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.description" type="textarea" rows="2" placeholder="请输入描述" />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="form.is_active" active-text="启用" inactive-text="禁用" />
          </el-form-item>
        </template>

        <!-- 资源池配置表单 -->
        <template v-if="currentType === 'resource'">
          <el-form-item label="所属应用" prop="application_id">
            <el-select v-model="form.application_id" placeholder="请选择所属应用" style="width: 100%">
              <el-option
                v-for="app in applications"
                :key="app.id"
                :label="app.name"
                :value="app.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="配置名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入配置名称" />
          </el-form-item>
          <el-form-item label="资源池类型" prop="pool_type">
            <el-input v-model="form.pool_type" placeholder="请输入资源池类型" />
          </el-form-item>
          <el-form-item label="资源池UID" prop="pool_uid">
            <el-input v-model="form.pool_uid" placeholder="请输入资源池UID" />
          </el-form-item>
          <el-form-item label="资源池名称" prop="spec_name">
            <el-input v-model="form.spec_name" placeholder="请输入资源池名称" />
          </el-form-item>
          <el-form-item label="资源池规格" prop="flavor_code">
            <el-input v-model="form.flavor_code" placeholder="请输入资源池规格" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.description" type="textarea" rows="2" placeholder="请输入描述" />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="form.is_active" active-text="启用" inactive-text="禁用" />
          </el-form-item>
        </template>

        <!-- 镜像配置表单 -->
        <template v-if="currentType === 'image'">
          <el-form-item label="所属应用" prop="application_id">
            <el-select v-model="form.application_id" placeholder="请选择所属应用" style="width: 100%">
              <el-option
                v-for="app in applications"
                :key="app.id"
                :label="app.name"
                :value="app.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="镜像名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入镜像名称" />
          </el-form-item>
          <el-form-item label="镜像版本" prop="image_version">
            <el-input v-model="form.image_version" placeholder="请输入镜像版本" />
          </el-form-item>
          <el-form-item label="镜像UID" prop="image_uid">
            <el-input v-model="form.image_uid" placeholder="请输入镜像UID" />
          </el-form-item>
          <el-form-item label="镜像版本UID" prop="image_version_uid">
            <el-input v-model="form.image_version_uid" placeholder="请输入镜像版本UID" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.description" type="textarea" rows="2" placeholder="请输入描述" />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="form.is_active" active-text="启用" inactive-text="禁用" />
          </el-form-item>
        </template>

        <!-- NAS配置表单 -->
        <template v-if="currentType === 'nas'">
          <el-form-item label="所属应用" prop="application_id">
            <el-select v-model="form.application_id" placeholder="请选择所属应用" style="width: 100%">
              <el-option
                v-for="app in applications"
                :key="app.id"
                :label="app.name"
                :value="app.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="配置名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入配置名称" />
          </el-form-item>
          <el-form-item label="NAS名称" prop="nas_name">
            <el-input v-model="form.nas_name" placeholder="请输入NAS名称" />
          </el-form-item>
          <el-form-item label="NAS类型" prop="nas_type">
            <el-input v-model="form.nas_type" placeholder="请输入NAS类型，如efs" />
          </el-form-item>
          <el-form-item label="NAS UID" prop="nas_uid">
            <el-input v-model="form.nas_uid" placeholder="请输入NAS UID" />
          </el-form-item>
          <el-form-item label="NAS实例ID" prop="nas_instance_id">
            <el-input v-model="form.nas_instance_id" placeholder="请输入NAS实例ID" />
          </el-form-item>
          <el-form-item label="NAS路径" prop="nas_shar_addr">
            <el-input v-model="form.nas_shar_addr" placeholder="请输入NAS路径" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.description" type="textarea" rows="2" placeholder="请输入描述" />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="form.is_active" active-text="启用" inactive-text="禁用" />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">{{ isViewMode ? '关闭' : '取消' }}</el-button>
        <el-button v-if="!isViewMode" type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import {
  getApplications,
  createApplication,
  updateApplication,
  deleteApplication,
  getObsBucketPresets,
  createObsBucketPreset,
  updateObsBucketPreset,
  deleteObsBucketPreset,
  getResourcePoolPresets,
  createResourcePoolPreset,
  updateResourcePoolPreset,
  deleteResourcePoolPreset,
  getImagePresets,
  createImagePreset,
  updateImagePreset,
  deleteImagePreset,
  getNasPresets,
  createNasPreset,
  updateNasPreset,
  deleteNasPreset,
} from '@/api/configPreset'

const activePresetType = ref('application')
const loading = ref(false)
const dialogVisible = ref(false)
const submitting = ref(false)
const currentType = ref('')
const isEdit = ref(false)
const isViewMode = ref(false)
const editId = ref(null)
const formRef = ref(null)
const selectedApplicationId = ref(null)

// 数据列表
const applications = ref([])
const obsBucketPresets = ref([])
const resourcePoolPresets = ref([])
const imagePresets = ref([])
const nasPresets = ref([])

// 表单数据
const form = ref({
  name: '',
  description: '',
  appid: '',
  hw_id: '',
  hw_appkey: '',
  vender: '',
  region: '',
  trainApiVersion: '',
  bucket_id: '',
  bucket_path: '',
  pool_type: '',
  pool_uid: '',
  spec_name: '',
  flavor_code: '',
  image_uid: '',
  image_version: '',
  image_version_uid: '',
  nas_name: '',
  nas_type: '',
  nas_uid: '',
  nas_instance_id: '',
  nas_shar_addr: '',
  application_id: null,
  is_active: true,
})

// 表单验证规则
const formRules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  application_id: [{ required: true, message: '请选择所属应用', trigger: 'change' }],
  bucket_id: [{ required: true, message: '请输入桶ID', trigger: 'blur' }],
  pool_type: [{ required: true, message: '请输入资源池类型', trigger: 'blur' }],
  pool_uid: [{ required: true, message: '请输入资源池UID', trigger: 'blur' }],
  spec_name: [{ required: true, message: '请输入资源池名称', trigger: 'blur' }],
  flavor_code: [{ required: true, message: '请输入资源池规格', trigger: 'blur' }],
  image_uid: [{ required: true, message: '请输入镜像UID', trigger: 'blur' }],
  image_version_uid: [{ required: true, message: '请输入镜像版本UID', trigger: 'blur' }],
  nas_name: [{ required: true, message: '请输入NAS名称', trigger: 'blur' }],
  nas_type: [{ required: true, message: '请输入NAS类型', trigger: 'blur' }],
  nas_uid: [{ required: true, message: '请输入NAS UID', trigger: 'blur' }],
  nas_instance_id: [{ required: true, message: '请输入NAS实例ID', trigger: 'blur' }],
  nas_shar_addr: [{ required: true, message: '请输入NAS路径', trigger: 'blur' }],
}

const dialogTitle = computed(() => {
  const typeNames = {
    application: '应用',
    obs: 'OBS桶配置',
    resource: '资源池配置',
    image: '镜像配置',
    nas: 'NAS配置',
  }
  if (isViewMode.value) {
    return `查看${typeNames[currentType.value]}`
  }
  return `${isEdit.value ? '编辑' : '新建'}${typeNames[currentType.value]}`
})

// Tab切换
const handleTabChange = () => {
  selectedApplicationId.value = null
  loadData(activePresetType.value)
}

// 加载应用列表
const loadApplications = async () => {
  try {
    const res = await getApplications({ active_only: false })
    applications.value = res.items
  } catch (error) {
    ElMessage.error('加载应用列表失败: ' + error.message)
  }
}

// 加载数据
const loadData = async (type) => {
  loading.value = true
  try {
    if (type === 'application' || !type) {
      await loadApplications()
    }
    if (type === 'obs' || !type) {
      const params = { active_only: false }
      if (selectedApplicationId.value) {
        params.application_id = selectedApplicationId.value
      }
      const res = await getObsBucketPresets(params)
      obsBucketPresets.value = res.items
    }
    if (type === 'resource' || !type) {
      const params = { active_only: false }
      if (selectedApplicationId.value) {
        params.application_id = selectedApplicationId.value
      }
      const res = await getResourcePoolPresets(params)
      resourcePoolPresets.value = res.items
    }
    if (type === 'image' || !type) {
      const params = { active_only: false }
      if (selectedApplicationId.value) {
        params.application_id = selectedApplicationId.value
      }
      const res = await getImagePresets(params)
      imagePresets.value = res.items
    }
    if (type === 'nas' || !type) {
      const params = { active_only: false }
      if (selectedApplicationId.value) {
        params.application_id = selectedApplicationId.value
      }
      const res = await getNasPresets(params)
      nasPresets.value = res.items
    }
  } catch (error) {
    ElMessage.error('加载数据失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 创建
const handleCreate = (type) => {
  currentType.value = type
  isEdit.value = false
  isViewMode.value = false
  editId.value = null
  form.value = {
    name: '',
    description: '',
    appid: '',
    hw_id: '',
    hw_appkey: '',
    vender: '',
    region: '',
    trainApiVersion: '',
    bucket_id: '',
    bucket_path: '',
    pool_type: '',
    pool_uid: '',
    spec_name: '',
    flavor_code: '',
    image_uid: '',
    image_version: '',
    image_version_uid: '',
    nas_name: '',
    nas_type: '',
    nas_uid: '',
    nas_instance_id: '',
    nas_shar_addr: '',
    application_id: null,
    is_active: true,
  }
  dialogVisible.value = true
}

// 查看
const handleView = (type, row) => {
  currentType.value = type
  isEdit.value = false
  isViewMode.value = true
  editId.value = row.id
  form.value = { ...row }
  dialogVisible.value = true
}

// 编辑
const handleEdit = (type, row) => {
  currentType.value = type
  isEdit.value = true
  isViewMode.value = false
  editId.value = row.id
  form.value = { ...row }
  dialogVisible.value = true
}

// 提交
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
  } catch {
    return
  }

  submitting.value = true
  try {
    const data = { ...form.value }

    if (currentType.value === 'application') {
      if (isEdit.value) {
        await updateApplication(editId.value, data)
        ElMessage.success('更新成功')
      } else {
        await createApplication(data)
        ElMessage.success('创建成功')
      }
      await loadData('application')
    } else if (currentType.value === 'obs') {
      if (isEdit.value) {
        await updateObsBucketPreset(editId.value, data)
        ElMessage.success('更新成功')
      } else {
        await createObsBucketPreset(data)
        ElMessage.success('创建成功')
      }
      await loadData('obs')
    } else if (currentType.value === 'resource') {
      if (isEdit.value) {
        await updateResourcePoolPreset(editId.value, data)
        ElMessage.success('更新成功')
      } else {
        await createResourcePoolPreset(data)
        ElMessage.success('创建成功')
      }
      await loadData('resource')
    } else if (currentType.value === 'image') {
      if (isEdit.value) {
        await updateImagePreset(editId.value, data)
        ElMessage.success('更新成功')
      } else {
        await createImagePreset(data)
        ElMessage.success('创建成功')
      }
      await loadData('image')
    } else if (currentType.value === 'nas') {
      if (isEdit.value) {
        await updateNasPreset(editId.value, data)
        ElMessage.success('更新成功')
      } else {
        await createNasPreset(data)
        ElMessage.success('创建成功')
      }
      await loadData('nas')
    }

    dialogVisible.value = false
  } catch (error) {
    ElMessage.error(error.response?.data?.detail || error.message || '操作失败')
  } finally {
    submitting.value = false
  }
}

// 删除
const handleDelete = async (type, row) => {
  try {
    await ElMessageBox.confirm(`确定要删除"${row.name}"吗？`, '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })

    if (type === 'application') {
      await deleteApplication(row.id)
      await loadData('application')
    } else if (type === 'obs') {
      await deleteObsBucketPreset(row.id)
      await loadData('obs')
    } else if (type === 'resource') {
      await deleteResourcePoolPreset(row.id)
      await loadData('resource')
    } else if (type === 'image') {
      await deleteImagePreset(row.id)
      await loadData('image')
    } else if (type === 'nas') {
      await deleteNasPreset(row.id)
      await loadData('nas')
    }

    ElMessage.success('删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.response?.data?.detail || error.message || '删除失败')
    }
  }
}

// 对话框关闭
const handleDialogClose = () => {
  formRef.value?.resetFields()
}

// 组件挂载时加载数据
onMounted(() => {
  loadApplications()
  loadData()
})
</script>

<style scoped lang="scss">
.config-presets-container {
  .preset-tabs {
    :deep(.el-tabs__content) {
      padding: 0;
    }
  }

  .preset-tab-content {
    .preset-actions {
      margin-bottom: 16px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
